<md-tabs md-dynamic-height md-stretch-tabs="always" md-border-bottom>
    <md-tab label="Properties" >
        <md-content layout-padding>

            <md-input-container class="md-block" flex-gt-xs>
                <label>Name</label>
                <input ng-model="$ctrl.container.name" name="name" type="text" ng-pattern="validate_name" md-maxlength="255">
                <div ng-messages="$ctrl.formReference.name.$error" role="alert" multiple>
                    <div ng-message="pattern" class="my-message">That doesn't look like a valid container name.</div>
                    <div ng-message="md-maxlength" class="my-message">Your container name is too long.</div>
                </div>
            </md-input-container>

            <md-input-container class="md-block" flex-gt-xs>
                <label>X-Container-Read</label>
                <input ng-model="$ctrl.container['X-Container-Read']" name="X-Container-Read" type="text" md-maxlength="255">
            </md-input-container>

            <md-input-container class="md-block" flex-gt-xs>
                <label>X-Container-Write</label>
                <input ng-model="$ctrl.container['X-Container-Write']" name="X-Container-Write" type="text" md-maxlength="255">
            </md-input-container>

            <label>Container Metadata</label>
            <md-button ng-click="$ctrl.add_x_container_meta()" aria-label="Add" class="md-icon-button"><i class="fa fa-fw fa-plus"></i></md-button>
            <div ng-repeat="record in $ctrl.container['X-Container-Meta']" ng-class-odd="'odd'" ng-class-even="'even'">
                <div layout-gt-xs="row" >
                    <md-input-container class="md-block" flex-gt-xs>
                        <label>Key</label>
                        <input ng-model="record.key" type="text">
                    </md-input-container>
                    <md-input-container class="md-block" flex-gt-xs>
                        <label>Value</label>
                        <input ng-model="record.value" type="text">
                    </md-input-container>
                    <md-button ng-click="$ctrl.delete_x_container_meta($index)" aria-label="Delete" class="md-icon-button"><i class="fa fa-fw fa-times"></i></md-button>
                </div>
            </div>

            <label>Account Metadata</label>
            <md-button ng-click="$ctrl.add_x_account_meta()" aria-label="Add" class="md-icon-button"><i class="fa fa-fw fa-plus"></i></md-button>
            <div ng-repeat="record in $ctrl.container['X-Account-Meta']" ng-class-odd="'odd'" ng-class-even="'even'">
                <div layout-gt-xs="row" >
                    <md-input-container class="md-block" flex-gt-xs>
                        <label>Key</label>
                        <input ng-model="record.key" type="text">
                    </md-input-container>
                    <md-input-container class="md-block" flex-gt-xs>
                        <label>Value</label>
                        <input ng-model="record.value" type="text">
                    </md-input-container>
                    <md-button ng-click="$ctrl.delete_x_account_meta($index)" aria-label="Delete" class="md-icon-button"><i class="fa fa-fw fa-times"></i></md-button>
                </div>
            </div>

            <md-input-container class="md-block" flex-gt-xs>
                <md-checkbox ng-model="$ctrl.container['PurgeOnDelete']" aria-label="purge_on_delete">
                  Purge on Delete
                </md-checkbox>
            </md-input-container>

        </md-content>
    </md-tab>
</md-tabs>
